<template>
  <view class="topic-page">
    <tab-banner :list="tabs" :current="activeIndex" @onTabClick="tabClick"></tab-banner>
    
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-icons type="search" size="24" color="#999"></uni-icons>
      <input type="text" placeholder="搜索话题" v-model="searchKey" @input="filterTopics" />
    </view>
    
    <!-- 话题列表 -->
    <view class="topic-list">
      <view class="topic-item" v-for="item in filteredTopics" :key="item.id">
        <view class="topic-title">{{ item.title }}</view>
        <view class="topic-content">{{ item.content }}</view>
        <view class="topic-meta">
          <text class="opinion-count">{{ item.opinionCount }}观点</text>
          <text class="hot-tag" v-if="item.isHot">热点</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tabBanner from "@/components/tabBanner.vue";
import topicData from "@/data/topic.json";

export default {
  components: { tabBanner },
  data() {
    return {
      tabs: topicData.tabs,
      topicList: topicData.topicList,
      filteredTopics: [],
      activeIndex: 0,
      searchKey: ""
    };
  },
  onLoad() {
    this.filteredTopics = this.topicList;
  },
  methods: {
    tabClick(index) {
      this.activeIndex = index;
      // 实际项目中可根据tab切换不同话题列表
    },
    filterTopics() {
      if (!this.searchKey) {
        this.filteredTopics = this.topicList;
        return;
      }
      this.filteredTopics = this.topicList.filter(item => 
        item.title.includes(this.searchKey) || item.content.includes(this.searchKey)
      );
    }
  }
};
</script>

<style scoped>
.topic-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.search-box {
  margin: 15rpx 20rpx;
  padding: 15rpx 20rpx;
  background-color: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
}
.search-box input {
  margin-left: 10rpx;
  flex: 1;
  font-size: 28rpx;
}
.topic-list {
  padding: 0 20rpx 20rpx;
}
.topic-item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.topic-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}
.topic-content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  line-height: 40rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
.hot-tag {
  background-color: #ff9500;
  color: #fff;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
}
</style>
